<template>
<!-- 秒杀场组件 -->
    <div class="buynow-container">
            <div class="buynow-bar">
                <div class="buynow-bar-left">限时秒杀</div>
                <div class="buynow-bar-right">
                    <van-count-down :time="time" class="countdown" />
                    <div class="scene">{{hour}}点场</div>
                </div>
            </div>
                <ul class="goods-list">
                    <li v-for="(goods,index) in goodslist" :key="index">
                        <router-link :to="{name:'seckill',params:{id:goods.id}}" >
                            <van-image :src="'../../../static/img/'+goods.img" class="seckillImg"/>
                            <p>{{goods.describe}}</p>
                            <strong class="nowPrice">￥{{goods.beforePrice}}</strong>
                            <s class="beforePrice">￥{{goods.afterprice}}</s>
                        </router-link>
                    </li>
                </ul>
        </div>
</template>

<script>
export default {
    data() {
        return {
            //商品列表数据
            goodslist: [
                {
                    id: 1,
                    img: "homeSecKillGood1.jpg",
                    describe: "NB ML373MTA 白",
                    beforePrice: "369",
                    afterprice: "496"
                },
                {
                    id: 2,
                    img: "homeSecKillGood2.jpg",
                    describe: "Air Jone MIL 黑",
                    beforePrice: "233",
                    afterprice: "586"
                },
                {
                    id: 3,
                    img: "homeSecKillGood3.jpg",
                    describe: "Ecca 黑 ",
                    beforePrice: "558",
                    afterprice: "646"
                },
                {
                    id: 4,
                    img: "homeSecKillGood4.jpg",
                    describe: "Niud 粉白 ",
                    beforePrice: "298",
                    afterprice: "364"
                }
            ],
            //秒杀数据
            hour: 23,
            time:
                Date.parse(
                    new Date().getFullYear() +
                        "-" +
                        (new Date().getMonth() + 1) +
                        "-" +
                        new Date().getDate() +
                        " " +
                        23 +
                        ":00:00"
                ) - Date.now()
        };
    },
};
</script>
<style scoped >
/* 限时秒杀模块*/
.buynow-bar {
    overflow: hidden;
    height: 1.066667rem;
    line-height: 1.066667rem;
    margin: 0 0.346667rem 0 0.346667rem;
}
.buynow-bar-left {
    padding-left: 0.266667rem;
    border-left: 5px solid #ff5733;
    font-size: 0.48rem;
    font-weight: bold;
    float: left;
}
.buynow-bar-right {
    overflow: hidden;
}
.scene {
    float: right;
    background-color: #ff5733;
    border-radius: 0.266667rem;
    color: white;
    width: 1.6rem;
    height: 0.693333rem;
    line-height: 0.693333rem;
    text-align: center;
    margin: 0.16rem 0.266667rem 0.16rem 0;
    box-shadow: 0.05rem 0.07rem 0.07rem rgba(0, 0, 0, 0.2);
    font-size: 0.346667rem;
}
.countdown {
    float: right;
    color: #ff5733;
    line-height: 1.066667rem;
}
ul {
    margin: 0.36rem 0.36rem;
    height: 11.466667rem;
    overflow: hidden;
}
ul > li {
    float: left;
    width: 4.613333rem;
    height: 4.6rem;
    text-align: center;
    padding: 0.266667rem;
    position: relative;
}
ul > li > p {
    margin: 125px auto 0;
}
ul > li > strong {
    display: inline-block;
}
.van-image {
    width: 78%;
}
.nowPrice {
    color: #ff5733;
    font-size: 0.35rem;
    margin-bottom: 0.266667rem;
}
.beforePrice {
    color: #8d8d8d;
    font-size: 0.14rem;
}
li:nth-child(1) {
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
li:nth-child(2) {
    border-bottom: 1px solid #eaeaea;
}
li:nth-child(3) {
    border-right: 1px solid #eaeaea;
}
</style>

